<template>
    <view class="gy-grid" :class="props.isCard ? 'gy-custom-card' : ''" :style="[gridStyle]">
        <slot></slot>
    </view>
</template>

<script lang="ts" setup>
    
	import {
		ref,
		computed,
		onMounted
	} from "vue";

    const props = defineProps({
        cols: {
            type: Number,
            default: 3
        },
        bgColor: {
            type: String,
            default: "transparent"
        },
        border: {
            type: Boolean,
            default: true
        },
        isCard: {
            type: Boolean,
            default: false
        }
    });

    const gridStyle = computed(() => {
        return {
            backgroundColor: props.bgColor || "transparent",
            gridTemplateColumns: `repeat(${props.cols}, 1fr)`
        }
    })

    onMounted(() => {
        if (props.border) {
            let children = []
            // // #ifdef H5
            // children = this.$children[0].$children
            // // #endif
            // // #ifdef MP-WEIXIN
            // children = this.$children
            // // #endif
            // for (var i = 0; i < children.length; i++) {
            //     if (((i + 1) % this.cols) !== 0) {
            //         children[i].$data.borderRight = true
            //     }
            // }
            // if (children.length > this.cols && (this.cols === 3 || this.cols === 4 || this.cols === 5)) {
            //     if ((children.length % this.cols) === 0) {
            //         for (var i = 0; i < children.length - this.cols; i++) {
            //             children[i].$data.borderBottom = true
            //         }
            //     } else {
            //         for (var i = 0; i < children.length - (children.length % this.cols); i++) {
            //             children[i].$data.borderBottom = true
            //         }
            //     }
            // }
        }
    });
</script>

<style lang="scss" scoped>
	.gy-grid {
	    width: 100%;
	    display: grid;
	    grid-template-rows: auto;
	    overflow: hidden;
	}
	
	.gy-grid.border {
	    border: 1rpx solid var(--gy-border-color);
	}
	
</style>